<template>
  <canvas
    class="canvas-comp"
    :id="idName"
    :width="width"
    :height="height">
  </canvas>
</template>

<script>
export default {
  name: 'canvasComp',
  props: {
    width: {
      type: Number,
      default: 200
    },
    height: {
      type: Number,
      default: 200
    },
    // canvas元素初始化之后
    initFn: {
      type: Function,
      default: null
    }
  },
  data() {
    return {
      idName: `canvas${this.$getRandomNum()}`,
      canvasEl: null,
      ctx: null
    };
  },
  async mounted() {
    await this.init();
    this.addEvt();
  },
  beforeDestroy() {
    this.removeEvt();
  },
  methods: {
    async init() {
      this.canvasEl = document.getElementById(this.idName);
      this.ctx = this.canvasEl.getContext('2d');
      if (this.$checkType(this.initFn) === 'function') {
        await this.initFn(this.canvasEl);
      }
    },
    // 添加事件监听
    addEvt() {
      window.addEventListener('resize', this.resize);
      this.canvasEl.addEventListener('click', this.handleClick);
      this.canvasEl.addEventListener('mouseenter', this.handleMouseEnter);
      this.canvasEl.addEventListener('mouseleave', this.handleMouseLeave);
    },
    // 移除事件监听
    removeEvt() {
      window.removeEventListener('resize', this.resize);
      this.canvasEl.removeEventListener('click', this.handleClick);
      this.canvasEl.removeEventListener('mouseenter', this.handleMouseEnter);
      this.canvasEl.removeEventListener('mouseleave', this.handleMouseLeave);
    },
    resize() {
      // const position = this.canvasEl.getBoundingClientRect();
      // console.log('position', this.canvasEl.toDataURL());
    },
    // canvas点击事件
    handleClick(e) {
      this.$emit('click', this.canvasEl, e);
    },
    // canvas鼠标移入
    handleMouseEnter(e) {
      this.$emit('mouseenter', this.canvasEl, e);
    },
    // canvas鼠标移出
    handleMouseLeave(e) {
      this.$emit('mouseleave', this.canvasEl, e);
    },
    getPosition(e, canvasEl) {
      const x = e.clientX;
      const y = e.clientY;
      const canvasBox = canvasEl.getBoundingClientRect();
      return {
        // 对canvas元素大小与绘图表面大小不一致时进行缩放
        x: (x - canvasBox.left) * (canvasEl.width / canvasBox.width),
        y: (y - canvasBox.top) * (canvasEl.height / canvasBox.height)
      };
    },
    /**
     * 设置图片边框
     * @param ctx: canvas实例
     * @param imgBase64: 图片路径、base64
     */
    setImage(ctx, imgBase64) {
      if (!imgBase64 || !ctx) return;
      const context = ctx || this.ctx;
      const image = new Image();
      image.onload = function () {
        const reg = context.createPattern(this, 'repeat');
        context.strokeStyle = reg;
        context.lineWidth = 10;
        context.strokeRect(10, 10, 50, 50);
      };
      image.src = imgBase64;
    },
    /**
     * 设置图片暗影
     * @param ctx: canvas实例
     * @param imgBase64: 图片路径、base64
     */
    getImage(ctx, imgBase64) {
      if (!imgBase64 || !ctx) return;
      const context = ctx || this.ctx;
      const img = new Image();
      img.onload = (e) => {
        const target = e.path && e.path[0];
        context.drawImage(target, 0, 0, 100, 100);
        const result = context.getImageData(50, 50, 50, 50);
        const imgData = result.data;
        for (let i = 0; i < imgData.length; i += 4) {
          const r = imgData[i];
          const g = imgData[i + 1];
          const b = imgData[i + 2];
          const gray = r * 0.189 + g * 0.597 + b * 0.214;
          imgData[i] = imgData[i + 1] = imgData[i + 2] = gray;
        }
        context.putImageData(result, 25, 25);
      };
      img.src = imgBase64;
    }
  }
};
</script>

<style lang="scss" scoped>
.canvas-comp {}
</style>
